<template>
  <el-dialog title="商品批量修改" width="50%" center :visible="invitor" @close="hide(false)">
     <el-form ref='form' :model='form' >
    <table class='restFormTable'  border-spacing=0 style="min-width:300px;width:100%;margin-bottom:10px"   >
      <tr>
        <td class='rest-tit'>
            品牌类型
        </td>
        <td class='rest-input'>
            <el-form-item size='mini' >
                <el-select v-model='form.type'  filterable placeholder="请选择">
                    <el-option
                    v-for="(item, index) in brands"
                    :key="index"
                    :label="item"
                    :value="index + ''">
                    </el-option>
                </el-select>
            </el-form-item>
        </td>
      </tr>
      <tr>
        <td class='rest-tit'>
            出口享惠情况
        </td>
        <td class='rest-input'>
            <el-form-item size='mini' >
                 <el-select v-model='form.state'   filterable placeholder="请选择">
                    <el-option
                    v-for="(item, index) in precents"
                    :key="index"
                    :label="item"
                    :value="index + ''">
                    </el-option>
                </el-select>
            </el-form-item>
        </td>
      </tr>
      <tr>
        <td class='rest-tit'>
            币制
        </td>
        <td class='rest-input'>
            <el-form-item size='mini' >
                <el-select 
                no-data-text="无数据"
                no-match-text='没有匹配的数据'
                v-model='form.currency'  
                default-first-option
                filterable 
                clearable
                @change='getSelectValue("currency",bilists,$event)'
                placeholder=''>
                <el-option
                  v-for='item in bilists'
                  :key='item._id'
                  :label='item.name'
                  :value='item.code'>
                   <span class="sel-labelleft">{{ item.code }}</span>
                  <span class="sel-labelright">{{ item.name }}</span>
                </el-option>
              </el-select>
            </el-form-item>
        </td>
      </tr>
      <tr>
        <td class='rest-tit'>
            最终目的国
        </td>
        <td class='rest-input'>
            <el-form-item size='mini' >
                <el-select 
                    v-model='form.destinationCountry'  
                    no-data-text="无数据"
                    no-match-text='没有匹配的数据'
                    @change='getSelectValue("destinationCountry",countrylists,$event)'
                    default-first-option
                    filterable 
                    clearable
                    placeholder=''
                >
                    <el-option
                    v-for='item in countrylists'
                    :key='item._id'
                    :label='item.name'
                    :value='item.code'>
                    <span class="sel-labelleft">{{ item.code }}</span>
                    <span class="sel-labelright">{{ item.name }}</span>
                    </el-option>
                </el-select>
            </el-form-item>
        </td>
      </tr>
       <tr>
        <td class='rest-tit'>
            征免
        </td>
        <td class='rest-input'>
            <el-form-item size='mini' >
                <el-select 
                  no-data-text="无数据"
                  no-match-text='没有匹配的数据'
                  v-model='form.dutyMode' 
                  @change='getSelectValue("dutyMode",mianLists,$event)'
                  default-first-option
                  filterable 
                  clearable
                  placeholder=''>
                  <el-option
                    v-for='item in mianLists'
                    :key='item._id'
                    :label='item.name'
                    :value='item.code'>
                    <span class="sel-labelleft">{{ item.code }}</span>
                    <span class="sel-labelright">{{ item.name }}</span>
                  </el-option>
                </el-select>
            </el-form-item>
        </td>
      </tr>
      <tr>
        <td class='rest-tit' rowSpan='2'>
            境内货源地
        </td>
        <td class='rest-input'>
            <el-form-item size='mini' >
                <el-select 
                  no-data-text="无数据"
                  no-match-text='没有匹配的数据'
                  v-model='form.destinationArea'
                  @change='getSelectValue("destinationArea",huoResLists,$event)'
                  default-first-option
                  filterable 
                  clearable
                  placeholder=''>
                  <el-option
                    v-for='item in huoResLists'
                    :key='item._id'
                    :label='item.name'
                    :value='item.code'>
                   <span class="sel-labelleft">{{ item.code }}</span>
                  <span class="sel-labelright">{{ item.name }}</span>
                  </el-option>
                </el-select>
            </el-form-item>
        </td>
      </tr>
      <tr>
        <td class='rest-input'>
            <el-form-item size='mini' >
                <el-select 
                  no-data-text="无数据"
                  no-match-text='没有匹配的数据'
                  v-model='form.destinationDetailArea'
                  @change='getSelectValue("destinationDetailArea",citiesList,$event)'
                  default-first-option
                  filterable 
                  clearable
                  placeholder=''>
                  <el-option
                    v-for='item in citiesList'
                    :key='item._id'
                    :label='item.name'
                    :value='item.code'>
                    <span class="sel-labelleft">{{ item.code }}</span>
                  <span class="sel-labelright">{{ item.name }}</span>
                  </el-option>
                </el-select>
            </el-form-item>
        </td>
      </tr>
      <tr>
        <td class='rest-tit'>
            原产国
        </td>
        <td class='rest-input'>
            <el-form-item size='mini' >
                <el-select 
                    v-model='form.originCode'  
                    no-data-text="无数据"
                    no-match-text='没有匹配的数据'
                    @change='getSelectValue("originCode",countrylists,$event)'
                    default-first-option
                    filterable 
                    clearable
                    placeholder=''
                >
                    <el-option
                    v-for='item in countrylists'
                    :key='item._id'
                    :label='item.name'
                    :value='item.code'>
                    <span class="sel-labelleft">{{ item.code }}</span>
                    <span class="sel-labelright">{{ item.name }}</span>
                    </el-option>
                </el-select>
            </el-form-item>
        </td>
      </tr>
      <!-- <tr>
        <td class='rest-tit'>
            货物属性
        </td>
        <td class='rest-input'>
            <el-form-item size='mini' >
                <el-input v-model='form.other'></el-input>
            </el-form-item>
        </td>
      </tr>
      <tr>
        <td class='rest-tit'>
            用途
        </td>
        <td class='rest-input'>
            <el-form-item size='mini' >
                <el-input v-model='form.other'></el-input>
            </el-form-item>
        </td>
      </tr> -->
    </table>
    <div style="text-align:right;padding-right:30px">
        <el-checkbox v-model="form.checkNull">仅修改为空的内容</el-checkbox>
    </div>
    </el-form>
    <div slot="footer" class="dialog-footer">
        <el-button size="mini" type="primary" @click="hide(true)">确 定</el-button>
        <el-button size="mini" @click="hide(false)">取 消</el-button>
    </div>
   </el-dialog>
</template>

<script>
export default {
  name: 'BatWin',
  props: ['invitor', 'brands', 'precents', 'bilists', 'countrylists', 'mianLists', 'huoResLists', 'citiesList'],
  data() {
    return {
      form: {
      },
      formLabelWidth: '120px'
    }
  },
  watch: {
    invitor(cur) {
      if (cur) {
        this.form = {
          checkNull: false
        }
      }
    }
  },
  methods: {
    getSelectValue(type, list, value) {
      this.form[type + 'Name'] = list.find(item => {
        return item.code === value
      }).name
    },
    hide(oper) {
      const {
        type,
        state,
        ...form
      } = this.form
      const goodsModelPre = [type, state]
      this.$emit('changingType', oper, 'batShow', form, goodsModelPre)
    }
  }
}
</script>
